<template>
  <div class="myCell">
    <!-- 顶部信息 -->
    <div class="personal-info">
      <!-- 用户头像 -->
      <div class="profile" v-if="$store.state.isLogin">
        <div class="avatar">
          <img src="./avatar.jpg" @click="editInfo" alt="" />
        </div>
        <div class="back">
          <img src="./avatar.jpg" alt="" />
        </div>
        <!-- 用户昵称 -->
        <div class="info">
          <div class="nickname">{{ userInfo.name }}</div>
        </div>
      </div>
      <div class="profile" v-else>
        <div class="avatar">
          <img src="./not-login.jpg" @click="login" alt="" />
        </div>
        <div class="back">
          <img src="./not-login-bgcimage.jpg" alt="" />
        </div>

        <!-- 用户昵称 -->
        <div class="info" v-if="$store.state.isLogin">
          <div class="nickname">{{ userInfo.name }}</div>
        </div>
        <div class="info" v-else @click="login">
          <div class="nickname">未登录</div>
        </div>
      </div>
    </div>
    <div class="other-info" v-if="$store.state.isLogin">
      <!-- 动态 -->
      <div class="dynamic">
        <span class="top">{{ userInfo.art_count }}</span>
        <span class="bottom">动态</span>
      </div>
      <!-- 关注 -->
      <div class="focus">
        <span class="top">{{ userInfo.follow_count }}</span>
        <span class="bottom">关注</span>
      </div>
      <!-- 粉丝 -->
      <div class="fans">
        <span class="top">{{ userInfo.fans_count }}</span>
        <span class="bottom">粉丝</span>
      </div>
    </div>
    <div class="other-info" v-else>
      <!-- 动态 -->
      <div class="dynamic">
        <span class="top">0</span>
        <span class="bottom">动态</span>
      </div>
      <!-- 关注 -->
      <div class="focus">
        <span class="top">0</span>
        <span class="bottom">关注</span>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="center" v-if="$store.state.isLogin">
      <!-- 我的收藏 -->
      <div class="collection">
        <i class="iconfont icon-shoucang" style="color:#e85155"></i>
        <p>收藏</p>
      </div>
      <!-- 历史足迹 -->
      <div class="history">
        <i class="iconfont icon-lishi" style="color:#fda74a"></i>
        <p>历史</p>
      </div>
      <!-- 个人作品 -->
      <div class="works">
        <i class="iconfont icon-zuopin" style="color:#6a93fc"></i>
        <p>作品</p>
      </div>
    </div>
    <div class="center" v-else>
      <!-- 我的收藏 -->
      <div class="collection"  @click="login">
        <i class="iconfont icon-shoucang" style="color:#e85155"></i>
        <p>收藏</p>
      </div>
      <!-- 历史足迹 -->
      <div class="history"  @click="login">
        <i class="iconfont icon-lishi" style="color:#fda74a"></i>
        <p>历史</p>
      </div>
    </div>
    <!-- 底部信息 -->
    <van-cell-group>
      <!-- 消息通知 -->
      <van-cell :border="false" class=" my-cell" title="消息通知">
        <template #icon>
          <i class="iconfont icon-xiaoxi1"></i>
        </template>
        <template #right-icon>
          <i class="iconfont icon-tubiao-"></i>
        </template>
      </van-cell>
      <!-- 用户反馈 -->
      <van-cell :border="false" class=" my-cell" title="用户反馈">
        <template #icon>
          <i class="iconfont icon-ziyuan"></i>
        </template>
        <template #right-icon>
          <i class="iconfont icon-tubiao-"></i>
        </template>
      </van-cell>
      <!-- 小智同学 -->
      <van-cell :border="false" class=" my-cell" title="小智同学">
        <template #icon>
          <i class="iconfont icon-jiqiren1"></i>
        </template>
        <template #right-icon>
          <i class="iconfont icon-tubiao-"></i>
        </template>
      </van-cell>
      <!-- 系统设置 -->
      <van-cell
        :border="false"
        class=" my-cell"
        title="系统设置"
        @click="system"
      >
        <template #icon>
          <i class="iconfont icon-shezhi-xue"></i>
        </template>
        <template #right-icon>
          <i class="iconfont icon-tubiao-"></i>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getUser } from '@/api/my.js'

export default {
  name: 'myInfoItem',
  data () {
    return {
      userInfo: ''
      // needToken: this.$store.state.isLogint
    }
  },
  props: {
    cellList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    getUser () {
      getUser().then(res => {
        this.userInfo = res.data
        console.log(res)
        this.$store.commit('setIsLogin', true)
        this.$store.commit('setUserInfo', res.data)
      })
    },
    editInfo () {
      this.$router.push('/home/editInfo/' + this.userInfo.id)
    },
    system () {
      this.$router.push('/home/system/' + this.userInfo.id)
    },
    login () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.myCell {
  .personal-info {
    height: 180px;
    .profile {
      position: relative;
      width: 100%;
      min-height: 240px;
      padding-top: 50px;
      overflow: hidden;
      background-color: rgba(7, 17, 27, 0.5);
      .avatar {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #727579;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        filter: blur(10px);
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .info .nickname {
      width: 100%;
      font-size: 15px;
      color: #fff;
      text-align: center;
      margin-top: 15px;
    }
  }
  .other-info {
    position: relative;
    display: flex;
    height: 60px;
    color: #fff;
    text-align: center;
    padding-top: 10px;
    .dynamic {
      flex: 1;
      .top,
      .bottom {
        display: block;
        margin-bottom: 2px;
      }
      .top {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
      }
      .bottom {
        font-size: 11px;
      }
    }
    .focus {
      flex: 1;
      .top,
      .bottom {
        display: block;
        margin-bottom: 2px;
      }
      .top {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
      }
      .bottom {
        font-size: 11px;
      }
    }
    .fans {
      flex: 1;
      .top,
      .bottom {
        display: block;
        margin-bottom: 2px;
      }
      .top {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
      }
      .bottom {
        font-size: 11px;
      }
    }
  }
  .center {
    display: flex;
    text-align: center;
    padding: 15px 0;
    margin: 12px 0;
    .collection {
      flex: 1;
    }
    .history {
      flex: 1;
    }
    .works {
      flex: 1;
    }
    .iconfont {
      font-size: 30px;
    }
    p {
      font-size: 12px;
      margin-top: 10px;
    }
  }
  .my-cell {
    height: 55px;
    font-size: 15px;
    .iconfont:first-child {
      font-size: 22px;
      margin: 0 10px;
    }
    .iconfont:last-child {
      font-size: 18px;
      margin-right: 10px;
      color: #5b5d75;
    }
  }
}
</style>
